<template>
    <div class="address-list flex flexv">
        <pub-head title="收货地址"></pub-head>

        <list
            v-model="loading"
            :finished="finished"
            :immediate-check="false"
            finished-color="#999"
            finished-text='没有更多咯~'
            @load="onLoad"
            v-if="!isEmpty"
        >
            <ul class="lists flex flexv">
                <li class="list flex flexv" v-for="(item, index) in list" :key="index">
                    <div @click="chooseAdd(item)">
                        <div class="user-info jus-b">
                            <span>{{item.name}}</span>
                            <span>{{item.phone}}</span>
                        </div>
                        <p class="address twoline">{{item.province + item.city+item.region+item.detail}}</p>
                    </div>
                    <div class="list-acts flex jus-b">
                        <div class="default flex click" @click="setDefault(item.isdefault,item.address_id,index)">
                            <div class="select" :class="{'selected': item.isdefault == 1}"></div>
                            <span class="red" v-if="item.isdefault == 1">默认地址</span>
                            <span v-else>设为默认</span>
                        </div>
                        <div class="acts flex">
                            <span class="edit click" @click="edit(item)">编辑</span>
                            <span class="delete click" @click="del(item.address_id,index)">删除</span>
                        </div>
                    </div>
                </li>
            </ul>
        </list>
        <!--为空-->
        <empty
            :ico="emptyIco"
            tip="您还未添加收货地址~"
            tipColor="#666"
            v-if="isEmpty"
        ></empty>

        <!-- 占位符 -->
        <div class="add-space"></div>
        <router-link :to="'/addressAdd'" class="add-btn tc">添加新地址</router-link>

    </div>
</template>

<script>
import Vue from 'vue';
import pubHead from '@/components/head'
import list from '@/components/listLoad/listLoad';
import empty from '@/components/empty/empty';
import { ReciveAddress, SetDefaultAdd, DelAddress } from '@/request/api';
import { Dialog, Toast } from 'vant'; 
export default {
    data(){
        return{
            selected: false, //
            page: 1,
            // 列表参数
            list: [],
            loading: true,
            finished: false,
            pagesize: 6,
            isEmpty: false,//列表是否为空
            emptyIco: require('@/assets/empty-data.png'), // 为空图片
        }
    },
    components: {
        pubHead,
        list,
        empty,
    },
    watch: {},
    created(){
        this.onLoad();
    },
    methods: {
        //获取数据
        onLoad() {
            //加载数据
            ReciveAddress({
                token:localStorage.getItem('token') ? localStorage.getItem('token') : '',
                page: this.page++,//当前页		
                pagesize: this.pagesize,//每页多少条数据
            }).then(res => {
                Toast.clear();
                if(res.code == 1) {
                    this.list = [...this.list, ...res.data.list];
                    this.loading = false;
                    this.finished = res.data.list.length < this.pagesize;
                    this.isEmpty = this.list.length == 0;
                } else {
                    this.$tip(res.msg)
                }
            })
            
        },
			
		back(){
			setTimeout(()=>{
				this.$router.go(-1);
			},1000)
		},
        //默认地址
        setDefault(status,id,index){
			
            if (status == 1) {
                this.$tip('不可取消默认地址！');
            } else {
                SetDefaultAdd({
                   token: localStorage.getItem('token') ? localStorage.getItem('token') : '',
                    address_id: id
                }).then(res => {
                    if (res.code == 1) {
                        this.$tip('设置成功');
                        this.list.map((item,cindex)=> {
                            if (cindex == index) {
                                item.isdefault = 1;
                            } else {
                                item.isdefault = 0;
                            }
                        })
						setTimeout(()=>{
							this.$router.go(-1);
						},1000)
						
                    } else {
                        this.$tip(res.msg);
                    }
                })
            }
            
        },
        //编辑地址
        edit(item){
            this.$router.push({name:'AddressAdd',params:item})
        },
            //删除地址
        del(val,index){
            Dialog.confirm({
                title: '确定删除该地址吗？'
            }).then(() =>{
                // on confirm
                DelAddress({
                    token: localStorage.getItem('token') ? localStorage.getItem('token') : '',
                    address_id: val
                }).then(res =>{
                    if (res.code == 1) {
                        this.$tip(res.msg);
                        this.list.splice(index,1);
						this.isEmpty = this.list.length == 0;
                    } else {
                        this.$tip(res.msg)
                    }
                })

            }).catch(()=>{
                // on cancel
            })
        },
        // 选择地址
        chooseAdd(item) {
            // let isorder = this.$route.query.isorder;
            // if (isorder == 1) {
            //     sessionStorage.setItem('address',JSON.stringify(item));
            //     this.$router.go(-1);
            // }
			 this.$router.go(-1);
        }
    },
}
</script>

<style lang="less" scoped>
.address-list{
    min-height: 100vh;
    background-color: #f5f5f5;
    .lists{
        .list{
            margin-top: 0.2rem;
            padding-top: 0.28rem;
            background-color: #fff;
            .user-info{
                padding: 0 0.28rem;
                font-size: 0.32rem;
                line-height: 120%;
                color: #333;
            }
            .address{
                margin-top: 0.16rem;
                padding: 0 0.28rem;
                font-size: 0.3rem;
                line-height: 150%;
                color: #333;
            }
            .list-acts{
                height: 0.9rem;
                margin-top: 0.2rem;
                font-size: 0.3rem;
                line-height: 0.9rem;
                color: #969696;
                padding: 0 0.28rem;
                border-top: 1px solid #dcdcdc;
                .default{
                    .select{
                        width: 0.36rem;
                        height: 0.36rem;
                        margin: auto 0;
                        border-radius: 100%;
                        border: 1px solid #8a8a8a;
                    }
                    .selected{
                        border: none !important;
                        background: url('~@/assets/selected.png') no-repeat center;
                        background-size: 0.36rem;
                    }
                    span{
                        margin-left: 0.2rem;
                    }
                }
                .acts{
                    .edit{
                        padding-left: 0.46rem;
                        background: url('~@/assets/edit-ico.png') no-repeat left center;
                        background-size: 0.34rem 0.36rem;
                    }
                    .delete{
                        margin-left: 0.2rem;
                        padding-left: 0.46rem;
                        background: url('~@/assets/add-delete-ico.png') no-repeat left center;
                        background-size: 0.3rem 0.34rem;
                    }
                }
            }
        }
    }
    .add-space{
        width: 100%;
        height: 0.98rem;
    }
    .add-btn{
        width: 100%;
        max-width: 750px;
        height: 0.98rem;
        margin: auto;
        position: fixed;
        z-index: 100;
        left: 0;
        right: 0;
        bottom: 0;
        font-size: 0.34rem;
        color: #fff;
        line-height: 0.98rem;
        background-color: #50AD22;
    }
}
</style>
<style lang="less">
.van-dialog__confirm, .van-dialog__confirm:active{
    color: #50AD22;
}
</style>
